<template>
	<view class="flex-col space-y-46 section_4">
	  <view class="flex-col space-y-21 group_4">
	    <text class="font_2 text_5">专利类型</text>
	    <view class="flex-col space-y-10 group_5">
	      <view class="flex-col space-y-10">
			<view class="flex-row space-x-30 flex flex-wrap">
				<view @click="choose('patentTypeIndex',index)" class="flex-col items-center text-wrapper" :class="{'light-border':index == condition.patentTypeIndex}" v-for="(item,index) in patentTypes" :key="index">
					<text class="font_3">{{item}}</text>
				</view>
			</view>
		  </view>
	    </view>
	    <view class="section_5"></view>
	    <text class="font_2 text_6">缴费截止日</text>
	    <view class="flex-col space-y-10 group_5">
	      <view class="flex-col space-y-10">
			<view class="flex-row space-x-30 flex flex-wrap">
				<view @click="choose('payOverTimeIndex',index)" class="flex-col items-center text-wrapper" :class="{'light-border':index == condition.payOverTimeIndex}" v-for="(item,index) in payOverTime" :key="index">
					<text class="font_3">{{item}}</text>
				</view>
			</view>
		  </view>
	    </view>
	    <view class="section_5"></view>
	    <text class="font_2 text_8">案件状态</text>
	    <view class="flex-col space-y-11 group_5">
	      <view class="flex-col space-y-10">
	        <view class="flex-row space-x-30 flex flex-wrap">
				<view @click="choose('caseStatusIndex',index)" class="flex-col items-center text-wrapper" :class="{'light-border':index == condition.caseStatusIndex}" v-for="(item,index) in caseStatus" :key="index">
					<text class="font_3">{{item}}</text>
				</view>
	        </view>
	      </view>
	    </view>
	    <view class="section_5"></view>
	    <text class="font_2 text_10">监管类型</text>
	    <view class="flex-col group_5">
	      <view class="flex-col space-y-10">
	        <view class="flex-row space-x-30 flex flex-wrap">
				<view @click="choose('regulatoryIndex',index)" class="flex-col items-center text-wrapper" :class="{'light-border':index == condition.regulatoryIndex}" v-for="(item,index) in regulatorys" :key="index">
					<text class="font_3">{{item}}</text>
				</view>
	        </view>
	      </view>
	    </view>
	  </view>
	  <view class="flex-row space-x-31 section_6">
	    <view class="flex-col items-center text-wrapper_7"><text class="font_2 text_11" @click="reset">重置</text></view>
	    <view class="flex-col items-center text-wrapper_8"><text class="font_2 text_12" @click="sure">确定</text></view>
	  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				caseStatus:['全部','审查前专利','审查中专利','审查后专利','授权未下证','授权已下证','撤回待处理','已失效专利','行政管理','其它专利'],
				regulatorys:['全部','代监管专利','合作专利'],
				payOverTime:['全部','近7日','近30日','近90日'],
				patentTypes:['全部','发明专利','实用新型','外观设计'],
				condition:{
					caseStatusIndex:0,
					regulatoryIndex:0,
					payOverTimeIndex:0,
					patentTypeIndex:0,
				},
				payOverTimes:['','7','30','90'],
				patentTypess:{
					"0":'',
					"1":'0',
					"2":'1',
					"3":'2'
				}
			};
		},
		onLoad(option) {
			
		},
		methods:{
			choose(type,index){
				this.condition[type] = index;
			},
			reset(){
				this.condition.caseStatusIndex = 0;
				this.condition.regulatoryIndex = 0;
				this.condition.patentTypeIndex = 0;
				this.condition.payOverTimeIndex = 0;
			},
			sure(){
				let infos = {
					source:this.condition.regulatoryIndex === 0 ? '' : this.condition.regulatoryIndex,
					paymentEndDate:this.payOverTimes[this.condition.payOverTimeIndex],
					patentType:this.patentTypess[this.condition.patentTypeIndex],
					level:this.condition.caseStatusIndex === 0 ? '' : this.condition.caseStatusIndex
				}
				this.$emit('handleBtn','rightPop','search',infos)
			}
		}
	}
</script>

<style lang="scss" scoped>
.light-border {
	border: solid 1rpx #5372fc;
	.font_3{
		color: #5372fc !important;
	}
}
.space-y-46 {
  & > view:not(:first-child),
  & > text:not(:first-child),
  & > image:not(:first-child) {
    margin-top: 46rpx;
  }
  .space-y-21 {
    & > view:not(:first-child),
    & > text:not(:first-child),
    & > image:not(:first-child) {
      margin-top: 21rpx;
    }
    .text_5 {
      margin-left: 50rpx;
      align-self: flex-start;
    }
    .space-y-10 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 10rpx;
      }
    }
    .group_5 {
      padding-left: 41rpx;
      padding-right: 30rpx;
      .group_6 {
        padding-bottom: 10rpx;
      }
      .text-wrapper_6 {
        padding: 16rpx 0 14rpx;
        align-self: flex-start;
        background-color: #f7f7f7;
        border-radius: 27rpx;
        width: 250rpx;
      }
    }
    .section_5 {
      background-color: #f4f6f8;
      height: 10rpx;
    }
    .text_6 {
      margin-left: 50rpx;
      align-self: flex-start;
    }
    .text_8 {
      margin-left: 50rpx;
      align-self: flex-start;
    }
    .space-y-11 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 11rpx;
      }
    }
    .space-x-30 {
      .text-wrapper {
        padding: 13rpx 0 15rpx;
        background-color: #edf1ff;
        border-radius: 27rpx;
		margin-bottom: 18rpx;
		text-align: center;
        width: 240rpx;
        height: 54rpx;
        .font_3 {
          font-size: 24rpx;
          font-family: Microsoft YaHei;
          line-height: 24rpx;
		  color: #666;
        }
      }
    }
    .text_10 {
      margin-left: 50rpx;
      align-self: flex-start;
    }
    .font_4 {
      font-size: 24rpx;
      font-family: Microsoft YaHei;
      line-height: 24rpx;
      color: #666666;
    }
  }
  .group_4 {
    padding: 21rpx 0;
  }
  .space-x-31 {
    & > view:not(:first-child),
    & > text:not(:first-child),
    & > image:not(:first-child) {
      margin-left: 31rpx;
    }
    .text-wrapper_7 {
      padding: 18rpx 0 22rpx;
      background-color: #ffffff;
      border-radius: 4rpx;
      width: 240rpx;
      height: 68rpx;
      border: solid 1rpx #e9e9e9;
      .text_11 {
        color: #666666;
        line-height: 26rpx;
      }
    }
    .text-wrapper_8 {
      padding: 20rpx 0;
      background-color: #5372fc;
      border-radius: 4rpx;
      width: 240rpx;
      height: 68rpx;
      .text_12 {
        color: #ffffff;
      }
    }
  }
  .section_6 {
    padding: 16rpx 44rpx 16rpx 45rpx;
    background-color: #ffffff;
    box-shadow: 0px -5rpx 1rpx #0000001a;
  }
  .font_2 {
    font-size: 28rpx;
    font-family: Microsoft YaHei;
    line-height: 28rpx;
    color: #333333;
  }
}
.section_4 {
  background-color: #ffffff;
  box-shadow: -5rpx 0px 1rpx #0000001a;
  width: 601rpx;
  margin-top: 200rpx;
}
</style>